<script setup>
import { reactive, ref, onMounted, getCurrentInstance, nextTick } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import MainContent from '@/components/mainContent.vue'
// 获取实例和路由
const { proxy: { $http } } = getCurrentInstance()
const route = useRoute()
const router = useRouter()

// 流式输出相关数据
const fullText = ref("这是一个美丽的早晨，阳光灿烂。乌龟陶陶正坐在她那舒适的小洞前，吃着车前草的叶子。她的头顶上，是一棵古老的橄榄树，一对鸽子正在树上谈话:狮王二十八世要举行婚礼了，他邀请所有动物前去参加庆典。狮王的宫殿路途遥远，而庆典不久就要开始，必须马上动身。两只鸽子说完就飞走了。\n")
const displayedText = ref("")
const currentIndex = ref(0)
const isTyping = ref(false)
// 流式输出文字函数
const typeText = () => {
  if (currentIndex.value < fullText.value.length) {
    displayedText.value += fullText.value.charAt(currentIndex.value)
    currentIndex.value++
    setTimeout(typeText, 200)
  } else {
    isTyping.value = false
  }
}
// 开始流式输出
const startTyping = () => {
  displayedText.value = ""
  currentIndex.value = 0
  isTyping.value = true
  typeText()
}
// 页面加载时获取数据
onMounted(async () => {
  // 等待DOM更新后开始流式输出
  await nextTick()
  startTyping()
})
</script>

<template>

  <!-- 主体内容区域 -->
  <MainContent contentWidth="90%" bgColor="#ffffff" padding="24px">
    <template #content>
      <!-- 左右分栏容器：Flex 布局 -->
      <div class="content-layout">
        <!-- 左侧：文字区域 -->
        <div class="content-text">
          <div class="text-content">
            <p class="text-paragraph">
              {{ displayedText }}
              <span v-if="isTyping" class="cursor">|</span>
            </p>
          </div>
        </div>
        <!-- 右侧：图片区域 -->
        <div class="content-image">
          <img src="@/assets/img/one.png" alt="教学系统功能展示" class="image-item" loading="lazy" />
        </div>
      </div>
    </template>
  </MainContent>

</template>

<style scoped lang='scss'>
.teacher-page {
  min-height: calc(100vh - 150px);
  background-color: #f5f7fa;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

// 左右分栏布局核心样式
.content-layout {
  display: flex;
  align-items: center;
  width: 100%;
  height: 80%;

  // 响应式适配：小屏幕（≤768px）切换为上下布局
  @media (max-width: 768px) {
    flex-direction: column;
    gap: 16px;
  }
}

// 左侧文字区域样式
.content-text {
  width: calc(100% - 390px); // 左侧宽度占比
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;margin-right: 40px;

  // 响应式适配：小屏幕占满宽度
  @media (max-width: 768px) {
    width: 100%;
    text-align: center;
  }

  .text-content {
    color: #666;
    text-indent: 2em;
    font-family: KaiTi;
    font-weight: 400;
    font-style: Regular;
    font-size: 1.8rem;
    line-height: 4.2rem;
    letter-spacing: 20%;
    text-align: justify;

    .text-paragraph {
      margin: 0 0 20px 0;
      word-wrap: break-word;
      word-break: break-word;
      white-space: normal; // 允许正常换行

      &:last-child {
        margin-bottom: 0;
      }
    }
  }
}

// 中间分隔线样式
.content-divider {
  width: 2px;
  height: 400px;
  background-color: #000000;

  // 响应式适配：小屏幕改为水平分隔线
  @media (max-width: 768px) {
    width: 100%;
    height: 1px;
    margin: 8px 0;
  }
}

// 右侧图片区域样式
.content-image {
  width: 300px;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  // 响应式适配：小屏幕占满宽度
  @media (max-width: 768px) {
    width: 100%;
  }

  .image-item {
    width: 300px;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    object-fit: cover;
  }

  .image-desc {
    margin-top: 12px;
    color: #999;
    font-size: 12px;
    text-align: center;
  }
}

// 响应式调整
@media (max-width: 375px) {
  .main-content {
    padding: 16px;
  }

  .book-card {
    max-width: 240px;

    .book-cover {
      .cover-image {
        height: 240px;
      }
    }

    .start-teaching-btn {
      font-size: 16px;
      padding: 10px 20px;
    }
  }
}
</style>
